<script setup lang="ts">
import { ref } from "vue";
import axios from "axios";
import { showToast, showConfirmDialog } from "vant";
const onClickLeft = () => history.back();
const value = ref("");

// 分类
const flag = ref(true);
const onflag = () => {
  flag.value = !flag.value;
};
// 购物车弹框
const mask = ref(false);
const Bullet = () => {
  mask.value = !mask.value;
};

// 列表数据
const listData = ref([]);
var data = ref([]);
const getData = async () => {
  await axios.get("/api/userdata1", {}).then((res) => {
    listData.value = res.data.data.slice(0, 1000);
    for (let i = 0; i < listData.value.length; i++) {
      let restorativesstate = listData.value[i].restorativesstate;
      data.value.push(restorativesstate);
      // 数组去重
      data.value = Array.from(new Set(data.value));
    }
  });
};

getData();

let current = ref(0);
// 存储搜索结果的列表
const dataData = ref([]);
const currentIndex = (item, index) => {
  current.value = index;
  if (item) {
    dataData.value = listData.value.filter((listItem) =>
      listItem.restorativesstate.includes(item)
    );
  }
};
// 拿到本地存储的购物车数据
const cartData = ref(JSON.parse(localStorage.getItem("cartData")) || []);
// 点击添加购物车
const addCart = (item) => {
  const cartId = item.id; // 获取当前商品的id
  // 如果不存在，就将当前商品添加到购物车数据中，并设置数量为1
  // 并将购物车数据存储到本地存储中
  if (!cartData.value.some((item) => item.id === cartId)) {
    showToast({ message: "添加成功", icon: "success" });
    cartData.value.push({ ...item, num: 1 }); // 将当前商品添加到购物车数据中，并设置数量为1
    // 将购物车数据存储到本地存储中
    localStorage.setItem("cartData", JSON.stringify(cartData.value));
  } else {
    showToast({ message: "已添加过该商品,数量为你加一" });
  }
  // 判断当前商品是否已经存在于购物车中
  // 如果存在数量加1
  cartData.value.forEach((item, index) => {
    if (item.id === cartId) {
      item.num++;
      // 将购物车数据存储到本地存储中
      localStorage.setItem("cartData", JSON.stringify(cartData.value));
      if (item.num >= item.restorativesinven - 1) {
        showToast({ message: "添加数量不能大于库存哦" });
      }
    }
  });
};

// 点击++ 单价*数量
const plus = (item) => {
  const cartId = item.id; // 获取当前商品的id
  cartData.value.forEach((item, index) => {
    if (item.id === cartId) {
      // if判断当前商品的数量是否大于等于库存
      if (item.num >= item.restorativesinven - 1) {
        showToast({ message: "数量不能大于库存" });
      } else {
        item.num += 1;
        // 将购物车数据存储到本地存储中
        localStorage.setItem("cartData", JSON.stringify(cartData.value));
      }
    }
  });
};

// 点击-- 单价*数量
const minus = (item) => {
  const cartId = item.id; // 获取当前商品的id
  cartData.value.forEach((item, index) => {
    if (item.id === cartId) {
      item.num -= 1;
      // 将购物车数据存储到本地存储中
      localStorage.setItem("cartData", JSON.stringify(cartData.value));
      if (item.num == 0) {
        // 从本地存储删除
        showConfirmDialog({
          title: "确认删除该商品吗？",
          message: "删除后，此商品将不会出现在购物车中，确定删除？",
        })
          .then(() => {
            cartData.value.splice(index, 1);
            localStorage.setItem("cartData", JSON.stringify(cartData.value));
            // 删除商品提示
            showToast({ message: "删除成功" });
          })
          .catch(() => {
            item.num = 1;
          });
      }
    }
  });
};

// 失焦
const blur = (item) => {
  const cartId = item.id; // 获取当前商品的id
  cartData.value.forEach((item, index) => {
    if (item.id === cartId) {
      if (item.num == item.restorativesinven) {
        showToast({ message: "输入的数量不能大于库存数量哦！" });
        item.num = item.restorativesinven;
        // 将购物车数据存储到本地存储中
        localStorage.setItem("cartData", JSON.stringify(cartData.value));
      } else if (item.num <= 0) {
        // 从本地存储删除
        showConfirmDialog({
          title: "确认删除该商品吗？",
          message: "删除后，此商品将不会出现在购物车中，确定删除？",
        })
          .then(() => {
            cartData.value.splice(index, 1);
            localStorage.setItem("cartData", JSON.stringify(cartData.value));
            // 删除商品提示
            showToast({ message: "删除成功" });
          })
          .catch(() => {
            item.num = 1;
            // 将购物车数据存储到本地存储中
            localStorage.setItem("cartData", JSON.stringify(cartData.value));
          });
      }
    }
  });
};

// 点击清空购物车
const delData = () => {
  cartData.value = [];
  localStorage.setItem("cartData", JSON.stringify(cartData.value));
  showToast({ message: "您已清空购物车" });
};

// 总价计算
let total = 0;
const totalPrice = () => {
  cartData.value.forEach((item) => {
    total += item.restorativesprice * item.num;
  });
};
totalPrice();

// 判断购物车是否有数据
const cart = ref(false);
console.log(cartData.value.length);
if (cartData.value.length === 0) {
  cart.value = true;
} else {
  cart.value = false;
}

// 返回上一页 数据回显
import {useRouter} from 'vue-router'
const router = useRouter();
const addData = ref();
const onAdd = () => {
  addData.value=(JSON.parse(localStorage.getItem("cartData")) || []);
  localStorage.setItem("addData", JSON.stringify(addData.value));
  // 返回上一页
  router.back();
};
</script>
<template>
  <van-nav-bar title="添加药品" left-arrow @click-left="onClickLeft" />
  <van-search
    v-model="value"
    shape="round"
    background="#fff"
    placeholder="请输入搜索关键词"
    input-align="center"
  />

  <div class="box">
    <div class="tab">
      <div class="left">
        <div
          class="left-item"
          :class="current === index ? 'active' : ''"
          @click="currentIndex(item, index)"
          v-for="(item, index) in data"
          :key="index"
        >
          {{ item }}
        </div>
      </div>
      <div class="right">
        <div class="top" v-if="flag">
          <span>全部</span>
          <span>全反复部</span>
          <span>全部</span>
          <span>全单方面部</span>
          <span>全部</span>
          <span @click="onflag">更多</span>
        </div>
        <div class="gd" v-else>
          <div class="gd-item">
            <span>全部</span>
            <span>全反复部</span>
            <span>全部</span>
            <span>全单方面部</span>
            <span>全部</span>
            <span>全部</span>
            <span>全反复部</span>
            <span>全部</span>
            <span>全单方面部</span>
            <span>全部</span>
            <span>全部</span>
            <span>全反复部</span>
            <span>全部</span>
            <span>全单方面部</span>
            <span>全部</span>
            <span>全部</span>
            <span>全反复部</span>
            <span>全部</span>
            <span>全单方面部</span>
            <span>全部</span>
            <span>全部</span>
            <span>全反复部</span>
            <span>全部</span>
            <span>全单方面部</span>
            <span @click="onflag">收起</span>
          </div>
        </div>
        <div class="com">
          <dl v-for="(item, ind) in dataData" :key="ind">
            <dt>
              <img :src="item.restorativesimage" alt="" />
            </dt>
            <dd>
              <div class="top1">
                <span class="se">{{ item.restorativestitle }}</span>
                <div class="title" style="text-indent: 37px">
                  {{ item.restorativesdesc }}
                </div>
              </div>
              <div class="js">适应症：用于肥胖或体重超重患者（体重指数≥24）的治疗</div>
              <div class="kc">库存：剩余 {{ item.restorativesinven }}盒</div>
              <div class="btn">
                <div class="price">￥{{ item.restorativesprice }}.00</div>
                <div class="add" @click="addCart(item)">添加</div>
              </div>
            </dd>
          </dl>
        </div>
      </div>
    </div>
    <div class="bot" v-if="cart">
      <div class="bot-item">
        <div class="left" @click="Bullet">
          <img src="../../images/add.png" alt="" />
          <span>尚未选择药品</span>
        </div>
        <div class="right">
          <span>确定</span>
        </div>
      </div>
    </div>
    <div class="bot" v-else>
      <div class="bot-item">
        <div class="left" @click="Bullet">
          <img src="../../images/add.png" alt="" />
          <span>总结算 ￥{{ total }}.00 </span>
        </div>
        <div class="right">
          <span @click="onAdd">确定</span>
        </div>
      </div>
    </div>

    <!-- 遮罩层 -->
    <div class="mask" @click="Bullet" v-if="mask"></div>
    <div class="mask-item" v-if="mask">
      <div class="title">
        <span>用药清单：已选择{{ cartData.length }}种药品</span>
        <span @click="delData">清空 <van-icon size="20px" name="delete-o" /></span>
      </div>
      <div class="com">
        <dl v-for="(item, ind) in cartData" :key="ind">
          <dt>
            <img :src="item.restorativesimage" alt="" />
          </dt>
          <dd>
            <div class="top1">
              <span class="se">{{ item.restorativestitle }}</span>
              <div class="title" style="text-indent: 37px">
                {{ item.restorativesdesc }}
              </div>
            </div>
            <div class="kc">库存：剩余 {{ item.restorativesinven }}盒</div>
            <div class="btn">
              <div class="price">￥{{ item.restorativesprice * item.num }}.00</div>
              <van-stepper
                v-model="item.num"
                @plus="plus(item)"
                @minus="minus(item)"
                @blur="blur(item)"
                :integer="true"
                :max="item.restorativesinven"
                min="0"
              />
            </div>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.box {
  width: 100%;
  font-size: 0.3rem;
  height: 11rem;
  background-color: #f5f5f5;

  .tab {
    width: 100%;
    height: 10rem;
    display: flex;
    margin-top: 0.05rem;
    background-color: #fff;
    overflow: scroll;

    .left {
      width: 2.5rem;
      height: 100%;
      overflow: scroll;
      background-color: #f5f5f5;

      .left-item {
        width: 100%;
        height: 1rem;
        text-align: center;
        line-height: 1rem;
      }
      .active {
        background-color: #fff;
        color: #236dd4;
      }
    }

    .right {
      width: 100%;
      height: 100%;
      position: relative;
      z-index: 1;

      .top {
        width: 100%;
        height: 1.75rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-evenly;
        overflow: hidden;

        span {
          float: left;
          background-color: #f5f5f5;
          border-radius: 0.1rem;
          padding: 0.2rem 0.3rem;
        }
      }

      .gd {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 0;
        left: 0;

        .gd-item {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          background-color: #fff;
          padding-bottom: 0.3rem;

          span {
            float: left;
            background-color: #f5f5f5;
            border-radius: 0.1rem;
            padding: 0.2rem 0.3rem;
            margin-top: 0.2rem;
            margin-left: 0.1rem;
          }
        }
      }

      .com {
        width: 100%;
        height: 8rem;
        margin-top: 0.1rem;
        overflow: scroll;

        dl {
          width: 95%;
          height: 3rem;
          margin-left: 2.5%;
          display: flex;

          dt {
            width: 1.5rem;
            height: 100%;

            img {
              width: 1rem;
              height: 1rem;
            }
          }

          dd {
            width: 95%;
            height: 3rem;
            margin-left: 2.5%;

            .top1 {
              width: 100%;
              height: 0.9rem;
              left: 0;
              top: 0;
              position: relative;
              z-index: -999;

              .se {
                float: left;
                color: #fff;
                background-color: #236dd4;
                font-size: 0.2rem;
                padding: 0 0.07rem;
                border-top-left-radius: 0.3rem;
                border-top-right-radius: 0.03rem;
                border-bottom-left-radius: 0.03rem;
                border-bottom-right-radius: 0.3rem;
                top: 0.1rem;
                position: absolute;
              }

              .title {
                width: 100%;
                font-size: 0.35rem;
                height: 0.8rem;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                display: -webkit-box;
                -webkit-box-orient: vertical;
              }
            }

            .js {
              width: 100%;
              height: 0.8rem;
              color: #999;
              font-size: 0.28rem;
            }

            .kc {
              width: 100%;
              height: 0.4rem;
              color: #999;
              font-size: 0.28rem;
            }

            .btn {
              display: flex;
              width: 100%;
              height: 1rem;
              justify-content: space-between;
              padding-right: 0.5rem;
              align-items: center;

              .price {
                font-size: 0.4rem;
                color: rgb(255, 123, 0);
              }

              .add {
                width: 1.2rem;
                height: 0.6rem;
                line-height: 0.6rem;
                text-align: center;
                background-color: #006aff;
                color: #fff;
                border-radius: 0.3rem;
              }

              .add {
                display: inline-block;
                background-color: #ff0081;
                color: #fff;
                border-radius: 0.1rem;
                border: none;
                cursor: pointer;
                position: relative;
                box-shadow: 0 0.1rem 0.2rem rgba(233, 30, 99, 0.5);
                outline: 0;
                transition: transform ease-in 0.1s, background-color ease-in 0.1s,
                  box-shadow ease-in 0.25s;
              }

              .add::before {
                position: absolute;
                content: "";
                left: -2em;
                right: -2em;
                top: -2em;
                bottom: -2em;
                pointer-events: none;
                background-repeat: no-repeat;
                background-image: radial-gradient(circle, #ff0081 20%, transparent 20%),
                  radial-gradient(circle, #ff0081 20%, transparent 20%),
                  radial-gradient(circle, #ff0081 20%, transparent 20%),
                  radial-gradient(circle, #ff0081 20%, transparent 20%),
                  radial-gradient(circle, #ff0081 20%, transparent 20%),
                  radial-gradient(circle, #ff0081 20%, transparent 20%),
                  radial-gradient(circle, #ff0081 20%, transparent 20%),
                  radial-gradient(circle, #ff0081 20%, transparent 20%),
                  radial-gradient(circle, #ff0081 20%, transparent 20%),
                  radial-gradient(circle, #ff0081 20%, transparent 20%),
                  radial-gradient(circle, #ff0081 20%, transparent 20%),
                  radial-gradient(circle, #ff0081 20%, transparent 20%),
                  radial-gradient(circle, #ff0081 20%, transparent 20%),
                  radial-gradient(circle, #ff0081 20%, transparent 20%),
                  radial-gradient(circle, #ff0081 20%, transparent 20%),
                  radial-gradient(circle, #ff0081 20%, transparent 20%);
                background-position: 5% 44%, -5% 20%, 7% 5%, 23% 0%, 37% 0, 58% -2%,
                  80% 0%, 100% -2%, -5% 80%, 100% 55%, 2% 100%, 23% 100%, 42% 100%,
                  60% 95%, 70% 96%, 100% 100%;
                background-size: 0% 0%;
                transition: background-position 0.5s ease-in-out,
                  background-size 0.75s ease-in-out;
              }
              .add:active::before {
                transition: 0s;
                background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%,
                  15% 15%, 10% 10%, 18% 18%, 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%,
                  10% 10%, 20% 20%;
                background-position: 18% 40%, 20% 31%, 30% 30%, 40% 30%, 50% 30%, 57% 30%,
                  65% 30%, 80% 32%, 15% 60%, 83% 60%, 18% 70%, 25% 70%, 41% 70%, 50% 70%,
                  64% 70%, 80% 71%;
              }
            }
          }
        }
      }
    }
  }

  .bot {
    width: 100%;
    height: 1.3rem;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;

    .bot-item {
      width: 95%;
      height: 1rem;
      background-color: #1d2b43;
      display: flex;
      color: #fff;
      align-items: center;
      border-radius: 1rem;

      .left {
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 0.65rem;
          height: 0.65rem;
        }
      }

      .right {
        width: 2.1rem;
        height: 0.75rem;
        border-radius: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #006aff;
        margin-left: 19%;
      }
    }
  }

  .mask {
    width: 100%;
    height: 88%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .mask-item {
    width: 100%;
    height: 9rem;
    background-color: #fff;
    border-bottom: 1px solid #e4e4e4;
    position: fixed;
    top: 3.1rem;
    z-index: 3;
    overflow: hidden;

    .title {
      width: 100%;
      height: 0.6rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.55rem;
    }

    .com {
      width: 97%;
      height: 100%;
      margin-left: 3%;
      overflow: scroll;
      padding-bottom: 1rem;

      dl {
        width: 97%;
        height: 2.5rem;
        margin-left: 2.5%;
        display: flex;
        border-bottom: 1px solid #f0f0f0;

        dt {
          width: 0.9rem;
          height: 100%;

          img {
            width: 0.9rem;
            height: 0.9rem;
          }
        }

        dd {
          width: 95%;
          height: 2.5rem;
          margin-left: 2.5%;

          .top1 {
            width: 100%;
            height: 0.9rem;
            left: 0;
            top: 0;
            position: relative;
            z-index: -999;

            .se {
              float: left;
              color: #fff;
              background-color: #236dd4;
              font-size: 0.2rem;
              padding: 0 0.07rem;
              border-top-left-radius: 0.3rem;
              border-top-right-radius: 0.03rem;
              border-bottom-left-radius: 0.03rem;
              border-bottom-right-radius: 0.3rem;
              top: 0.1rem;
              position: absolute;
            }

            .title {
              width: 100%;
              font-size: 0.35rem;
              height: 0.8rem;
              overflow: hidden;
              text-overflow: ellipsis;
              -webkit-line-clamp: 2;
              display: -webkit-box;
              -webkit-box-orient: vertical;
            }
          }

          .js {
            width: 100%;
            height: 0.65rem;
            color: #999;
            font-size: 0.28rem;
          }

          .kc {
            width: 100%;
            height: 0.55rem;
            color: #999;
            font-size: 0.28rem;
          }

          .btn {
            display: flex;
            width: 100%;
            height: 0.8rem;
            justify-content: space-between;
            padding-right: 0.03rem;
            align-items: center;

            .price {
              font-size: 0.4rem;
              color: rgb(255, 123, 0);
            }

            .add {
              width: 1.2rem;
              height: 0.6rem;
              line-height: 0.6rem;
              text-align: center;
              background-color: #006aff;
              color: #fff;
              border-radius: 0.1rem;
            }
          }
        }
      }
    }
  }
}
</style>
